<template>
    <div class="item-container" @click="itemClick">
        <el-row align="middle" :gutter="10">
            <el-col :offset="1" :span="2"><img style="width: 50px;height: 50px;" :src="birthdayImg"></el-col>
            <el-col :span="9">
                <div style="display: flex;align-items: center;gap: .5em;">
                    <span class="name">{{ person.name }}</span>
                    <el-tag :type="dateTypeTag">{{ dateType }}</el-tag>
                    <el-tag type="success">{{ chineseZodiac }}</el-tag>
                    <el-tag type="danger">{{ constellation }}</el-tag>
                </div>
                <div class="birthday">{{ person.birthday }}</div>
            </el-col>
            <el-col :span="8">
                <div style="color: dodgerblue;" v-if="daysUntilBirthday > 0">
                    <span class="name">{{ daysUntilBirthday }}</span>天后{{ yearsUntilBirthday }}周岁生日
                </div>
                <div v-else style="color: red;">生日快乐！！！</div>
            </el-col>
            <el-col :span="4">
                <el-button type="primary" :icon="Edit" circle size="large" @click.stop="() => editData(person)" />
                <el-button type="danger" :icon="Delete" circle size="large" @click.stop="() => deleteData(person)" />
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { Delete, Edit } from '@element-plus/icons-vue'
import birthdayUtil from '../utils/birthdayUtil'
import birthdayImg from '@/assets/images/birthday.png'

const props = defineProps({
    person: {
        type: Object,
        required: true,
    },
});

const emit = defineEmits(["loadData", "editData", "deleteData", "itemClick"])

const dateTypeTag = computed(() => {
    return props.person.dateType === "1" ? "primary" : "warning";
});
// 倒数天数
const daysUntilBirthday = computed(() => {
    return birthdayUtil.daysUntilBirthday(props.person.birthday, props.person.dateType);
});
// 生肖
const constellation = computed(() => {
    return birthdayUtil.getConstellation(props.person.birthday, props.person.dateType);
});
// 星座
const chineseZodiac = computed(() => {
    return birthdayUtil.getChineseZodiac(props.person.birthday, props.person.dateType);
});
const dateType = computed(() => {
    return props.person.dateType == 1 ? "公历" : "农历";
});
// 几周年
const yearsUntilBirthday = computed(() => {
    return birthdayUtil.yearsUntilBirthday(props.person.birthday, props.person.dateType);
});

function itemClick() {
    emit('itemClick');
}

// 删除数据
function deleteData(person) {
    emit('deleteData');
}

// 编辑数据
function editData(person) {
    emit('editData');
}
</script>

<style scoped>
</style>